<!doctype html>

<!--[if lt IE 7 ]> <html lang="ru" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="ru" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="ru" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="ru" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="ru" class="no-js"> <!--<![endif]-->
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	</head>

	<body>
		<dl id="dateTest">
			<dt>Date of birth:</dt>
			<dd data-name="person.dateOfBirth" class="datefield">
				<select name="person.dateOfBirth.month">
					<option value="01">January</option>
					<option value="02">February</option>
					<option value="03">March</option>
					<option value="04">April</option>
					<option value="05">May</option>
					<option value="06">June</option>
					<option value="07">July</option>
					<option value="08">August</option>
					<option value="09">September</option>
					<option value="10">October</option>
					<option value="11">November</option>
					<option value="12">December</option>
				</select>
				<input type="text" name="person.dateOfBirth.day" value="1" />
				<input type="text" name="person.dateOfBirth.year" value="2011" />
			</dd>
		</dl>

		<button onclick="getFormData()">Test</button>

		<pre><code id="testArea">
		</code></pre>

		<script type="text/javascript" src="../src/form2object.js"></script>
		<script type="text/javascript" src="json2.js"></script>
		<script type="text/javascript">
			function processDate(node)
			{
				var dataName = node.getAttribute ? node.getAttribute('data-name') : '',
					dayNode,
					monthNode,
					yearNode,
					day,
					year,
					month;
				
				if (dataName && dataName != '' && node.className == 'datefield')
				{
					dayNode = node.querySelector('input[name="'+dataName + '.day"]');
					monthNode = node.querySelector('select[name="'+dataName + '.month"]');
					yearNode = node.querySelector('input[name="'+dataName + '.year"]');

					day = dayNode.value;
					year = yearNode.value;
					month = monthNode.value;

					return { name: dataName, value:  year + '-' + month + '-' + day};
				}

				return false;
			}

			function getFormData()
			{
				var formData = form2object('dateTest', '.', true, processDate);
				document.getElementById('testArea').innerHTML = JSON.stringify(formData, null, '\t');
			}
		</script>
	</body>
</html>